<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>复杂一点的案例 - JRoll</title>
  <link rel="stylesheet" href="../css/demo.css">
  <script src="../download/jroll.min.js"></script>
</head>
<body>
  <div id="complex">
    <header id="header">
      <div id="switchL">切到左边</div>
      <div id="switchR">切到右边</div>
      <div id="line"></div>
    </header>
    <div id="wrapper">
      <div id="scrollerL">
      </div>
      <div id="scrollerR">
        <img src="../images/1.jpg" width="100%" height="auto" />
        <p>纳米核心 图1</p>
        <img src="../images/2.jpg" width="100%" height="auto" />
        <p>纳米核心 图2</p>
        <img src="../images/3.jpg" width="100%" height="auto" />
        <p>纳米核心 图3</p>
        <img src="../images/4.jpg" width="100%" height="auto" />
        <p>纳米核心 图4</p>
        <img src="../images/5.jpg" width="100%" height="auto" />
        <p>纳米核心 图5</p>
        <img src="../images/6.jpg" width="100%" height="auto" />
        <p>纳米核心 图6</p>
      </div>
    </div>
  </div>
  <script>
    //给scrollerL填点数据
    (function (){
      var str = "";
      for (var i=1; i<=100; i++) {
        str += "<li>"+i+"</li>";
      }
      document.getElementById("scrollerL").innerHTML = str;
    })();

    function gId(id) {
      return document.getElementById(id);
    }

    var sty = document.createElement('div').style;
    var tSF = ("transform" in sty) ? "transform" : "-webkit-transform";
    var tSD = ("transitionDuration" in sty) ? "transition-duration" : "-webkit-transition-duration";

    var switchL = gId("switchL");
    var switchR = gId("switchR");
    var line = gId("line");
    var scrollerL = gId("scrollerL");
    var scrollerR = gId("scrollerR");
    var maxScrollX = -1*scrollerR.offsetWidth;

    var jrollL = new JRoll("#wrapper", {bounce:true});
    var jrollR = new JRoll("#wrapper", {bounce:true, scroller:scrollerR});

    jrollL.maxScrollX = jrollR.maxScrollX = maxScrollX;

    //jrollR里的图片加载完成时要refresh
    var imgs = document.querySelectorAll("#scrollerR img");
    if (imgs) {
      Array.prototype.forEach.call(imgs, function(i){
        i.onload = function() {
          jrollR.refresh();
          jrollR.maxScrollX = maxScrollX;
        };
      });
    }

    function switchToL() {
      line.style[tSD] = "400ms";
      setTimeout(function() {
        line.style[tSF] = "translateX(0)";
        jrollL.scrollTo(0, jrollL.y, 400);
        jrollR.scrollTo(0, jrollR.y, 400);
        setTimeout(function() {
          line.style[tSD] = "0";
        }, 400)
      }, 4)
    }

    function switchToR() {
      line.style[tSD] = "400ms";
      setTimeout(function() {
        line.style[tSF] = "translateX("+line.offsetWidth+"px)";
        jrollL.scrollTo(jrollL.maxScrollX, jrollL.y, 400);
        jrollR.scrollTo(jrollR.maxScrollX, jrollR.y, 400);
        setTimeout(function() {
          line.style[tSD] = "0";
        }, 400)
      }, 4)
    }

    /** 事件 **/
    //jrollL
    jrollL.on("scrollStart", function() {
      if (!this._scroll.lockX) {
        this.options.momentum = false;
      } else {
        this.options.momentum = true;
      }
    });
    jrollL.on("scroll", function() {
      if (!this._scroll.lockX) {
        line.style[tSF] = "translateX("+(-this.x/2)+"px)";
        jrollR.scrollTo(this.x, jrollR.y);
      }
    });
    jrollL.on("scrollEnd", function() {
      if (this.x < -50) {
        switchToR();
      } else if (this.x > -50 && this.x < 0) {
        switchToL();
      }
    });
    //jrollR
    jrollR.on("scrollStart", function() {
      if (!this._scroll.lockX) {
        this.options.momentum = false;
      } else {
        this.options.momentum = true;
      }
    });
    jrollR.on("scroll", function(e) {
      if (!this._scroll.lockX) {
        line.style[tSF] = "translateX("+(-this.x/2)+"px)";
        jrollL.scrollTo(this.x, jrollL.y);
      }
    });
    jrollR.on("scrollEnd", function() {
      if (this.x > maxScrollX + 50) {
        switchToL();
      } else if (this.x < maxScrollX + 50 && this.x > maxScrollX) {
        switchToR();
      }
    });

    switchL.onclick = function() {
      switchToL();
    }
    switchR.onclick = function() {
      switchToR();
    }
  </script>
</body>
</html>